<template>
    <div class="container">

        <div class="body_wrap">

            <el-card shadow="hover" ref="content_card">

                <!-- 搜索+功能按钮 -->
                <el-form ref="search" :inline="true" :model="queryParams" size="medium" label-width="120px">
                    <el-card class="table_tool_bar_wrap mb10" shadow="never">
                        <div class="base_wrap">
                            <div class="left">
                                <el-form-item label="" prop="keyword">
                                    <el-input placeholder="请输入..." prefix-icon="el-icon-search" v-model="queryParams.keyword" clearable/>
                                </el-form-item>
                                <el-button @click="handleSearch" type="primary" size="medium">搜索</el-button>
                                <el-button @click="handleReset" type="info" plain size="medium">重置</el-button>
                            </div>

                            <div class="right">
                                <el-button @click="handleAddOrUpdateVisible()" type="primary" size="medium" icon="el-icon-plus">新增</el-button>
                                <el-button @click="handleDelete()" type="danger" size="medium" icon="el-icon-delete" :disabled="selectionRows.length == 0">删除</el-button>
                            </div>
                        </div>

                    </el-card>
                </el-form>

                <!-- 表格 -->
                <el-table
                    class="mt10"
                    ref="table"
                    size="medium"
                    height="650"
                    empty-text="暂无数据"
                    element-loading-text="给我一点时间"
                    fit border highlight-current-row
                    :stripe="stripe"
                    v-loading="loading"
                    :data="dataList"
                    @selection-change="handleSelection">

                    <el-table-column type="selection" width="55" prop="selection" v-if="isHideColumn('selection')" align="center"></el-table-column>
                    <el-table-column label="序号" type="index" prop="index" v-if="isHideColumn('index')" width="60" align="center"/>
                    <el-table-column label="任务名称" prop="jobName" v-if="isHideColumn('jobName')" align="left" show-overflow-tooltip/>
                    <el-table-column label="Cron表达式" width="200" prop="jobCron" v-if="isHideColumn('jobCron')" align="left" show-overflow-tooltip/>
                    <el-table-column label="状态" align="center" width="100px">
                        <template slot-scope="scope">
                            <el-link v-if="scope.row.jobStatus == 'RUNNING'" type="primary" :underline="false">正常</el-link>
                            <el-link v-else-if="scope.row.jobStatus == 'PAUSE'" type="danger" :underline="false">暂停</el-link>
                            <el-link v-else-if="scope.row.jobStatus == 'FINISHED'" type="danger" :underline="false">完成</el-link>
                            <el-link v-else-if="scope.row.jobStatus == 'FAILED'" type="danger" :underline="false">失败</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" width="180" prop="ctime" v-if="isHideColumn('ctime')" align="left" show-overflow-tooltip/>

                    <el-table-column label="操作" prop="btn" v-if="isHideColumn('btn')" width="280px" align="left" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" :disabled="scope.row.jobStatus === 'FINISHED' || scope.row.jobStatus === 'PAUSE'" @click="handlePauseJob(scope.row)">暂停</el-button>
                            <el-button type="text" size="small" :disabled="scope.row.jobStatus === 'FINISHED' || scope.row.jobStatus === 'RUNNING'" @click="handleResumeJob(scope.row)">恢复</el-button>
                            <el-button type="text" size="small" :disabled="scope.row.jobStatus === 'FINISHED' || scope.row.jobStatus === 'PAUSE'" @click="handleTriggerJob(scope.row)">触发</el-button>

                            <el-button @click="handleAddOrUpdateVisible(scope.row.id)" type="text" size="small">编辑</el-button>
                            <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                            <el-button @click="handleDrawerVisible(scope.row.id)" type="text" size="small">详情</el-button>
                        </template>
                    </el-table-column>

                </el-table>

                <!-- 分页 -->
                <TablePagination
                    :total.sync="queryParams.total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.limit"
                    @handleSizeChange="handleSizeChange"
                    @handleCurrentChange="handleCurrentChange"/>
            </el-card>

            <!-- 弹窗, 新增 / 修改 -->
            <AddOrUpdate ref="addOrUpdate" @refreshDataList="getDataList"></AddOrUpdate>

            <!-- 右侧抽屉,详情信息 -->
            <el-drawer
                ref="drawer"
                class="drawer_wrap"
                size="1000px"
                :visible.sync="drawerVisible"
                :with-header="false"
                :modal="true"
                direction="rtl"
                :before-close="handleCloseDrawerDetail">
                <div class="header_title">
                    <div class="title"><i class="el-icon-document"></i> 详情</div>
                    <div class="close el-icon-close" @click="$refs.drawer.closeDrawer()"></div>
                </div>

                <div class="header_body">
                    <table class="detail_wrap">
                        <tbody>
                            <tr>
                                <td class="title">任务名称</td>
                                <td class="info">{{detail.jobName}}</td>
                                <td class="title">任务状态</td>
                                <td class="info">
                                    <el-link v-if="detail.jobStatus == 'RUNNING'" type="primary" :underline="false">待触发执行</el-link>
                                    <el-link v-else-if="detail.jobStatus == 'PAUSE'" type="danger" :underline="false">暂停</el-link>
                                    <el-link v-else-if="detail.jobStatus == 'FINISHED'" type="danger" :underline="false">完成</el-link>
                                    <el-link v-else-if="detail.jobStatus == 'FAILED'" type="danger" :underline="false">失败</el-link>
                                </td>
                            </tr>
                            <tr>
                                <td class="title">Cron表达式</td>
                                <td class="info">{{detail.jobCron}}</td>
                                <td class="title">触发时间</td>
                                <td class="info">{{detail.jobTriggerDate}}</td>
                            </tr>
                            <tr>
                                <td class="title">任务的参数</td>
                                <td class="info">{{detail.jobParams}}</td>
                            </tr>
                            <tr>
                                <td class="title">执行作业类</td>
                                <td class="info">{{detail.jobClassPath}}</td>
                            </tr>
                            <tr>
                                <td class="title">描述信息</td>
                                <td class="info">{{detail.jobDesc}}</td>
                            </tr>
                            <tr>
                                <td class="title">失败原因</td>
                                <td class="info">{{detail.failureCause}}</td>
                            </tr>
                            <tr>
                                <td class="title">创建时间</td>
                                <td class="info">{{detail.ctime}}</td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </el-drawer>

        </div>
    </div>
</template>

<script>
    import TableMixin from '@/mixin/TableMixin'
    import TableTools from '@/views/components/table/table-tools'
    import TablePagination from '@/views/components/table/table-pagination'
    import AddOrUpdate from './add-or-update-dialog'

    export default {
        mixins: [TableMixin],
        components: {
            TableTools,
            TablePagination,
            AddOrUpdate
        },

        data() {
            return {
                dataList: [],
                queryParams: {
                    jobName: null,
                    jobGroup: null,
                    jobCron: null,
                    jobTriggerDate: null,
                    jobClassPath: null,
                    jobParams: null,
                    jobDesc: null,
                    jobStatus: null,
                    failureCause: null,
                    ctime: null,
                    utime: null
                },
                detail: {
                    id: null,
                    jobName: null,
                    jobGroup: null,
                    jobCron: null,
                    jobTriggerDate: null,
                    jobClassPath: null,
                    jobParams: null,
                    jobDesc: null,
                    jobStatus: null,
                    failureCause: null,
                    ctime: null,
                    utime: null
                }
            }
        },

        created() {
        },

        mounted() {
            this.$nextTick(() => {
                this.getDataList()
            })
        },

        methods: {

            /**
             * 侧边栏抽屉打开
             */
            handleDrawerVisible(id) {
                this.getInfo(id)
                this.drawerVisible = true
            },

            /**
             * 新增或编辑
             */
            handleAddOrUpdateVisible(id) {
                // 表单窗口
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },

            /**
             * 删除
             */
            async handleDelete(row) {
                let ids = []
                if (row) {
                    ids.push(row.id)
                }
                if (this.selectionRows) {
                    this.selectionRows.filter((item, index) => {
                        ids.push(item.id)
                    })
                }
                if (ids.length <= 0) {
                    this.$notify({title: '提示', message: '请选择需要删除的记录！', type: 'info'});
                } else {
                    const confirm = await this.$confirm('确定要删除？', '提示', {type: 'warning'}).catch(() => {
                    })
                    if (confirm) {
                        const res = await this.$http({
                            url: '/system/scheduler/delete',
                            method: 'POST',
                            data: ids
                        })
                        if (this.ResultMessage(res)) {
                            this.getDataList()
                        }
                    }
                }
            },

            /**
             * 详细信息
             */
            async getInfo(id) {
                if (id) {
                    const res = await this.$http({
                        url: '/system/scheduler/info/' + id,
                        method: 'GET'
                    })
                    this.detail = Object.assign({}, res.data)
                }
            },

            /**
             * 获取表格数据
             */
            async getDataList() {
                this.loading = true
                const res = await this.$http({
                    url: '/system/scheduler/page',
                    method: 'GET',
                    params: this.queryParams
                })
                if (this.ResultMessage(res, false)) {
                    this.dataList = res.data.records || []
                    this.queryParams.total = res.data.total
                }
                this.loading = false
            },

            /**
             * 恢复任务
             */
            async handleResumeJob(row) {
                const confirm = await this.$confirm('确定要恢复任务？', '提示', { type: 'warning' }).catch(() => {})
                if(confirm) {
                    const res = await this.$http({
                        url: '/system/scheduler/resumeJob',
                        method: 'GET',
                        params: {'id': row.id, 'jobName': row.jobName, 'jobGroup': row.jobGroup}
                    })
                    if (this.ResultMessage(res)) {
                        this.getDataList()
                    }
                }
            },

            /**
             * 触发任务
             */
            async handleTriggerJob(row) {
                const confirm = await this.$confirm('确定要触发任务？', '提示', { type: 'warning' }).catch(() => {})
                if(confirm) {
                    const res = await this.$http({
                        url: '/system/scheduler/triggerJob',
                        method: 'GET',
                        params: {'id': row.id, 'jobName': row.jobName, 'jobGroup': row.jobGroup}
                    })
                    if (this.ResultMessage(res)) {
                        this.getDataList()
                    }
                }
            },

            /**
             * 暂停任务
             */
            async handlePauseJob(row) {
                const confirm = await this.$confirm('确定要暂停任务？', '提示', { type: 'warning' }).catch(() => {})
                if(confirm) {
                    const res = await this.$http({
                        url: '/system/scheduler/pauseJob',
                        method: 'GET',
                        params: {'id': row.id, 'jobName': row.jobName, 'jobGroup': row.jobGroup}
                    })
                    if (this.ResultMessage(res)) {
                        this.getDataList()
                    }
                }
            },

            /**
             * 更多
             */
            handleCommand(command) {
                this.$message('click on item ' + command);
            },

            /**
             * 搜索
             */
            handleSearch() {
                this.getDataList()
            },

            /**
             * 重新加载数据表格
             */
            handleReload() {
                this.getDataList()
            },

            /**
             * 重置搜索表单
             */
            handleReset() {
                this.handleResetPage()
                this.$refs.search.resetFields()
                this.handleReload()
            }

        }

    }
</script>

<style lang="scss" scoped>

</style>
